<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿制关键词提示</title>
</head>

<body>
    <form method="post">
        <p>
            <label for="search">
                你要搜索:
            </label>
            <input id="search" type="text" oninput="getKeys()">
            <button type="submit">搜索</button>
        </p>
        <select id="slt"></select>
    </form>
    <script>
        function getKeys() {
            var val = document.getElementById("search").value;
            if (val == "异步") {// 这里不是真实的 应该是设置个时间:等待0.5s数据不发生变化 用用户输入词请求后端 获取提示词
                var xhr = new XMLHttpRequest();
                xhr.open("GET", "http://ts.codecore.cn/getkeys", true)
                xhr.send()
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        //将返回的json字符串转化成能够操纵的数据类型
                        var res = JSON.parse(xhr.responseText)
                        var s = ""
                        for(let i = 0; i < res.data.length; i++){
                            s = s + '<option value="' + res.data(i) + '">' + res.data(i) + '</option>';
                        }
                        document.getElementById("slt").innerHTML = s;
                    }
                }
            }
        }
    </script>
</body>

</html>